<template>
  <!-- 导航菜单容器，router表示开启路由控制，一般要设置 -->
  <!-- 还可以可控制背景颜色，字体颜色 -->
  <el-menu
    class="el-menu-vertical-demo"
    router
    background-color="#65C8B7"
    text-color="#fff"
    :collapse="$store.state.collapse.isCollapsed"
    collapse-transition
    @click="changeMenu"
  >
    <div class="aside-title" v-show="!$store.state.collapse.isCollapsed">
      <div class="img"><img class="logo-image" src="@/assets/images/logo.png" /></div>
      <div class="text"><span>管理系统</span></div>
    </div>
    <!-- el-submenu表示子菜单 -->
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span>首页</span>
      </template>
      <el-menu-item index="/index">
        <i class="el-icon-menu"></i>
        首页
      </el-menu-item>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-orange"></i>
        <span>会员管理</span>
      </template>
      <!-- el-menu-item表示子菜单项，index设置为路由path，则可以跳转 -->
      <el-menu-item index="/list">
        <i class="el-icon-user-solid"></i>
        会员信息
      </el-menu-item>
      <el-menu-item index="/cart">
        <i class="el-icon-shopping-cart-2"></i>
        购物车信息
      </el-menu-item>
      <el-menu-item index="/address">
        <i class="el-icon-location"></i>
        收获地址
      </el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-s-order"></i>
        <span>订单管理</span>
      </template>
      <!-- el-menu-item表示子菜单项，index设置为路由path，则可以跳转 -->
      <el-menu-item index="/orderList">
        <i class="el-icon-s-release"></i>
        订单管理
      </el-menu-item>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-shopping-bag-1"></i>
        <span>商品管理</span>
      </template>
      <el-menu-item index="/banner">
        <i class="el-icon-picture-outline"></i>
        轮播图管理
      </el-menu-item>
      <el-menu-item index="/category">
        <i class="el-icon-present"></i>
        商品分类管理
      </el-menu-item>
      <el-menu-item index="/attr">
        <i class="el-icon-document"></i>
        规格属性管理
      </el-menu-item>
      <el-menu-item index="/goods">
        <i class="el-icon-shopping-bag-2"></i>
        商品信息管理
      </el-menu-item>
      <el-menu-item index="/brand">
        <i class="el-icon-picture-outline-round"></i>
        品牌管理
      </el-menu-item>
      <el-menu-item index="/sku">
        <i class="el-icon-picture-outline-round"></i>
        SKU管理
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "LeftMenu",
  methods: {
    changeMenu() {
      this.$store.commit("isShow", true);
    },
  },
};
</script>

<style>
 .logo-image {
      width: 80px;
      height: 25px;
    }
/*设置菜单所有标题样式文字靠左*/
.el-submenu__title {
  text-align: left;
}
.aside-title {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  width: 200px;
  text-align: center;
  
}
.img{
  margin-top: 8px;
}
.text{
  color:#F6EFD4;
  font-family: "Microsoft YaHei";
  font-style: italic;
}
.aside-user h3 {
  margin: 5px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo {
  overflow-inline: hidden;
  overflow-block: hidden;
}
</style>
